import { useState, useRef, useCallback, memo, useMemo } from "react"
import { getUsers } from "../../api/user"
import { useApiHook } from "../../api/apiHook"
import { useApiHookManual } from "../../api/clickApiHook"
import { Button } from "antd"
export default function () {
    const { data, loading, error } = useApiHook(getUsers) // 自动触发（适用于数据展示类）
    const { data: dataManual, loading: loadingManual, fetchData } = useApiHookManual(getUsers) // 手动触发（适用于查询、分页等）

    const getData = () => {
        getUsers().then((res) => {
            console.log(1, res)
        })
    }
    return (
        <>
            <div className="main_box">
                <h1>本案例展示 react中axios的使用 </h1>

                <div className="main_row">
                    <p>1.自动触发的apiHooks: {loading ? "加载中" : "加载完成"}</p>
                    <p>数据：{error ? "错误" : JSON.stringify(data)}</p>
                </div>
                <div className="main_row">
                    <p>
                        2.手动触发的apihooks: {loadingManual ? "等待中" : "加载完成"}{" "}
                        <Button type="primary" onClick={() => fetchData()}>
                            手动触发
                        </Button>
                    </p>
                </div>
                <div className="main_row">
                    <p>
                        3.正常写法：
                        <Button type="primary" onClick={() => getData()}>
                            调用接口
                        </Button>
                    </p>
                </div>
                <div className="main_row">
                    <p>调用接口可以通过自定义hooks进行封装，可以提高复用率，使组件更专注与UI渲染。</p>
                    <p>当然正常写法也可以，不一定要玩的这么花。</p>
                </div>
            </div>
        </>
    )
}
